<!DOCTYPE html>
<html lang="ru">
  
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>Mesto</title>
  </head>

  <body class="page">

    <!-- Header -->

    <header class="header">
      <img
        src="<%=require('../src/images/logo.svg')%>"
        alt="Лого Место Россия"
        class="header__logo"
      />
    </header>

    <!-- Main content -->

    <main class="content">

      <!-- Profile -->

      <section class="profile">
        <div class="profile__container">
          <div class="profile__image">
            <button
              type="button"
              aria-label="Изменение аватара"
              class="profile__avatar-edit"
            ></button>
          </div>
          <div class="profile__info">
            <div class="profile__editor">
              <h1 class="profile__name"></h1>
              <button
                type="button"
                aria-label="Изменение профиля"
                class="profile__edit-button"
              ></button>
            </div>
            <h2 class="profile__job"></h2>
          </div>
        </div>
        <button
          type="button"
          aria-label="Добавление карточки"
          class="profile__add-button"
        ></button>
      </section>

      <!-- Elements -->

      <section class="elements">
        <ul class="elements__container"></ul>
      </section>
    </main>

    <!-- Footer -->

    <footer class="footer">
      <p class="footer__copyright">&#169; 2023 Mesto Russia</p>
    </footer>

    <!-- Popup profile editor -->

    <section class="popup popup_type_profile-edit">
      <div class="popup__container">
        <button
          type="button"
          aria-label="Закрытие окна"
          class="popup__close popup__close_type_profile-edit"
        ></button>
        <h2 class="popup__title">Редактировать профиль</h2>
        <form name="profile-form" class="popup__form" novalidate>
          <input
            type="text"
            name="title"
            placeholder="Введите имя"
            minlength="2"
            maxlength="40"
            required
            id="title"
            class="popup__input popup__input_type_title"
          />
          <span id="title-error" class="popup__input-error"></span>
          <input
            type="text"
            name="job"
            placeholder="Введите работу"
            minlength="2"
            maxlength="200"
            required
            id="job"
            class="popup__input popup__input_type_job"
          />
          <span id="job-error" class="popup__input-error"></span>
          <button type="submit" class="popup__submit-button">Сохранить</button>
        </form>
      </div>
    </section>

    <!-- Popup add element -->

    <section class="popup popup_type_add-element">
      <div class="popup__container">
        <button
          type="button"
          aria-label="Закрытие окна"
          class="popup__close"
        ></button>
        <h2 class="popup__title">Новое место</h2>
        <form name="add-card" class="popup__form" novalidate>
          <input
            type="text"
            name="name"
            placeholder="Введите название картинки"
            minlength="2"
            maxlength="30"
            required
            id="name"
            class="popup__input popup__input_type_name"
          />
          <span id="name-error" class="popup__input-error"></span>
          <input
            type="url"
            name="link"
            placeholder="Введите ссылку на картинку"
            id="link"
            required
            class="popup__input popup__input_type_link"
          />
          <span id="link-error" class="popup__input-error"></span>
          <button type="submit" class="popup__submit-button">Создать</button>
        </form>
      </div>
    </section>

    <!-- Popup image -->

    <section class="popup popup_type_image">
      <div class="popup__image-container">
        <button
          type="button"
          aria-label="Закрытие окна"
          class="popup__close"
        ></button>
        <img src="#" alt="" class="popup__image" />
        <h2 class="popup__caption"></h2>
      </div>
    </section>

    <!-- Popup add avatar -->

    <section class="popup popup_type_avatar">
      <div class="popup__container">
        <button
          type="button"
          aria-label="Закрытие окна"
          class="popup__close"
        ></button>
        <h2 class="popup__title">Обновить аватар</h2>
        <form name="add-avatar" class="popup__form" novalidate>
          <input
            type="url"
            name="avatar"
            placeholder="Введите ссылку на картинку"
            id="avatar"
            required
            class="popup__input popup__input_type_avatar"
          />
          <span id="avatar-error" class="popup__input-error"></span>
          <button type="submit" class="popup__submit-button">Сохранить</button>
        </form>
      </div>
    </section>

    <!-- Popup confirm -->

    <section class="popup popup_type_confirm">
      <div class="popup__container">
        <button
          type="button"
          aria-label="Закрытие окна"
          class="popup__close"
        ></button>
        <h2>Вы уверены?</h2>
        <form name="confirm" class="popup__form" novalidate>
          <button type="submit" class="popup__submit-button">Да</button>
        </form>
      </div>
    </section>

    <!-- Element template -->

    <template class="template">
      <li class="element">
        <button
          type="button"
          aria-label="Удалить"
          class="element__delete"
        ></button>
        <img src="#" alt="" class="element__image" />
        <div class="element__description">
          <h2 class="element__title"></h2>
          <div class="element__like-info">
            <button
              type="button"
              aria-label="Сердце"
              class="element__heart"
            ></button>
            <span class="element__count"></span>
          </div>
        </div>
      </li>
    </template>

  </body>

</html>
